<template>

     <div class="invite">
                <div>
                    <van-nav-bar title="邀请好友" left-arrow right-text="等级规则"  @click-left="$router.go(-1)"  @click-right="onClickRight" />
                </div>
                 <div class="header_placeholder" style="width:100%;height:3rem" id="cust_head"></div>

                <div class="invite_main">
                    <!-- <p>153****5447邀请了6个好友</p> -->
                    <div class="invite_banner">
                        <img src="../../assets/img/device_1.png">
                    </div>
                    <div>
                        <div class="invite_title">
                            <h4>我的业绩</h4>
                        </div>
                        <ul class="invite_flex invite_info_border">
                            <li>
                                <span>我的业绩</span>
                                <b v-html="teamNote.MyAchievement"></b>
                            </li>
                            <li>
                                <span>产能收益</span>
                                <b v-html="teamNote.capacity"></b>
                            </li>
                            <li>
                                <span>邀请返佣</span>
                                <b v-html="teamNote.invit"></b>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <div class="invite_title">
                            <h4>我的团队</h4>
                        </div>
                        <ul class="invite_flex invite_info_border">
                            <li>
                                <span>一级好友</span>
                                <b v-html="teamNote.one"></b>
                            </li>
                            <li>
                                <span>二级好友</span>
                                <b v-html="teamNote.two">tow</b>
                            </li>
                            <li>
                                <span>三级好友</span>
                                <b v-html="teamNote.three">three</b>
                            </li>
                        </ul>
                    </div>
                    <div>
                        <div class="invite_title">
                            <h4>邀请记录</h4>
                        </div>
                        <div class="invite_tema">
                            <div class="invite_tema_note ">
                                 <div>关系</div>
                                 <div>被邀请人</div>
                                 <div>时间</div>
                                    <div>邀请奖励</div>
                                 <div>业绩</div>
                              
                            </div>
                            <div  class="invite_tema_note_detail" v-for="(item,indx) in teamNote.list">
                                 <div v-html="item.relationship"></div>
                                 <div  v-html="item.name"></div>
                                 <div  v-html="base.formatDate(item.create_time)"></div>
                                   <div  v-html="item.reward"></div>
                                <div  v-html="item.sunGrade"></div>
                               
                            </div>
                         
                             
                        </div>
                    </div>
                </div>

                <div class="footer_placeholder" style="width:100%;height:3rem"></div>
                <div class="invite_footer">
                    <div class="footer_code">
                        <p>我的邀请码：{{$route.params.id}}</p> 
                        <span @click="copyUSDT">点击复制</span>
                    </div>
                    <van-button type="primary" text="生成邀请海报" @click="show = true" />
                    <!-- <button>生成邀请海报</button> -->
                </div>

                <van-overlay :show="show" @click="show = false">
                    <div class="cover_wrap" @click.stop>
                        <div class="cover">
                            <h3>选择海报</h3>
                            <ul class="poster_list">
                                <li>
                                    <img :src="baseURL+HaiBao_img[0]">
                                    <van-radio-group v-model="radio">
                                      <van-radio name="1">
                                        <img
                                          slot="icon"
                                          slot-scope="props"
                                          :src="props.checked ? activeIcon : inactiveIcon" style="width:2rem;"
                                        >
                                      </van-radio>
                                    </van-radio-group>
                                </li>
                                <li>
                                    <img :src="baseURL+HaiBao_img[1]">
                                    <van-radio-group v-model="radio">
                                      <van-radio name="2">
                                        <img
                                          slot="icon"
                                          slot-scope="props"
                                          :src="props.checked ? activeIcon : inactiveIcon" style="width:2rem;"
                                        >
                                      </van-radio>
                                    </van-radio-group>
                                </li>
                            </ul>
                         
                            <dl class="download" style="margin-top: 2rem;" @click='saveImg'>
                                <dt><img src="../../assets/img/mine/download.png"></dt>
                                <dd>保存图片</dd>
                            </dl>
                            <button @click="show = false">取消</button>
                        </div>
                    </div>
                </van-overlay>
                  <div class="header_placeholder" style="width:100%;height:3rem" ></div>
            </div>


</template>

<script>
export default {
 name: "login",
data() {
    return {
      
          show: false,
          radio: '1',
          activeIcon: require('../../assets/img/mine/radio_active.png'),
          inactiveIcon: require('../../assets/img/mine/radio_inactive.png'),
          teamNote:{},
          HaiBao_img:{},
          
    }
},
mounted() { 
      let that=this;
     
   
    that.base.head_status(1)
   
    that.show_metd();

    that.getHaiBao_metd();
},
 methods:{
            show_metd(){
                
                  let that=this;
            
                 var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.teamNote(data).then(res => {
                            if(res.code==200){
                                 that.teamNote=res.data;
                                 
                            }else{
                                 that.$toast({ message: res.msg, position: "bottom" });
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
            },
            getHaiBao_metd(){
                 
                  let that=this;
            
                 var data={token:JSON.parse(localStorage.userinfo).token}
                       that._API.getHaiBao(data).then(res => {
                            if(res.code==200){
                                 that.HaiBao_img=res.data;
                                 
                            }else{
                                 that.$toast({ message: res.msg, position: "bottom" });
                            }
                           
                        }).catch(err => {
                            console.log("err", err);
                        });
            },
     saveImg(){
         
         let that=this;
        console.log(that.baseURL+that.HaiBao_img[that.radio-1])

         api.download({
                url: that.baseURL+that.HaiBao_img[that.radio-1],
                
                report: true,
                cache: true,
                allowResume: true
            }, function(ret, err) {
                if (ret.state == 1) {
                    console.log("这是路径"+ret.savePath)
                        api.saveMediaToAlbum({
                            path: ret.savePath,
                        }, function(ret, err) {
                            if (ret && ret.status) {
                                that.$toast({ message: "海报保存成功", position: "bottom" });
                            } else {
                                that.$toast({ message: "海报保存失败", position: "bottom" });
                            }
                        });
                
                } else {

                }
            });
       
     },
        copyUSDT(){  //复制文本
         var that=this;
          var clipBoard = api.require('clipBoard');
      
           clipBoard.set({
                    value: that.$route.params.id,
                }, function(ret, err) {
                    if (ret) {
                        that.$toast({ message: "复制成功", position: "bottom" });
                       
                    } else {
                         that.$toast({ message: "复制失败！", position: "bottom" });
                       
                    }
                })
     },
            
           onClickRight(){
                this.$router.push({ name: 'gradeRule',params:{id:5}})
              
           },
           onClickLeft(){
               
           }
               


      }
}
</script>


<style lang="scss" scoped>
.invite_tema{ box-shadow: 0 0 0.2rem 0.1rem #8921ff inset;  width:100%;   border-radius: 0.3rem; padding:0.5rem 0; }
.invite_tema_note,.invite_tema_note_detail{display: flex;width: 100%;justify-content: center;align-items: center;padding: 0.2rem 0}
.invite_tema_note>div{flex:1;text-align: center;font-size: 0.7rem}
.invite_tema_note_detail>div{flex:1;text-align: center;font-size: 0.7rem;line-height: 1.3   rem}


  /deep/.van-nav-bar{
        background: #190147;
        width:100%;
        position: fixed;
    }
    /deep/.van-nav-bar .van-icon{
        color:#fff;
    }
    /deep/.van-nav-bar__arrow{
        font-size:20px;
    }
    /deep/.van-nav-bar__title{
        color:#fff;
    }
    /deep/.van-nav-bar__right{
        font-size: 13px;
    }
    /deep/.van-nav-bar__text{
        color: #fff;
    }

    .invite_main{
        padding:0 0.7rem;
        width:100%;
        box-sizing: border-box;
    }
    .invite_main>p{
        font-size:0.9rem;
        color:rgba(255,255,255,0.6);
        line-height: 2.8rem;
    }
    .invite_banner,.invite_banner img{
        width:100%;
    }
    .invite_title{
        line-height: 1.6rem;
        margin:0.5rem 0 0.4rem;
    }
    .invite_title h4{
        font-size: 1rem;
        color:#00C6FF;
        display: inline-block;
        font-weight: 400;
    }

    .invite_info_border{
        box-shadow: 0 0 0.2rem 0.1rem #8921ff inset;
        width:100%;
        border-radius: 0.3rem;
        padding:0.4rem 0;
        display: flex
    }
 
    .invite_flex{
        display: flex;
    }
    .invite_flex li{
        flex: 1;
        text-align: center;
    }
    .invite_flex li b{
        display: block;
        font-size: 0.86rem;
    }
    .invite_flex li span{
        font-size: 0.84rem;
        line-height:1.6rem;
    }
    .invite_record{
        box-sizing: border-box;
        padding:0.5rem 0.4rem;
    }
    .invite_record table{
        width:100%;
        font-size:0.84rem;
        text-align:center;
    }
    .invite_record>p{
        font-size: 0.84rem;
        color:rgba(255,255,255,0.5);
        margin:1.7rem 0;
        text-align: center;
    }
    .invite_footer{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        height: 3.3rem;
        background:#2C025C;
        overflow: hidden;
            padding: 0.5rem 0;
                padding-bottom: 2rem;
    }
    .footer_code{
        width:40%;
        float: left;
        text-align: center;
    }
    .footer_code p{
        font-size:0.82rem;
        margin-top:0.1rem;
            line-height: 1.5rem;
    }
    .footer_code span{
        font-size:0.8rem;
        padding:0.2rem 0.4rem;
        color: #00C6FF;
        border:1px solid #00C6FF;
        border-radius: 1rem;
        margin-top:0.4rem;
        line-height:0.8rem;
    }
    .invite_footer button{
        width:55%;
        float: left;
        height:2.5rem;
        margin-top:2%;
        color:#fff;
        background:linear-gradient(to right,#831BFA,#9510E2);
        font-size:0.9rem;
        border-radius: 1.7rem;
        border:none;
    }

    .van-overlay{
        background-color: rgba(0,0,0,.6);
    }
    /*.cover_wrap {
        height: 100%;
    }*/
    .cover {
        width: 100%;
        height: 29rem;
        background-color: #2C025C;
        position: absolute;
        bottom:0;
        left:0;
        border-radius: 0.4rem 0.4rem 0 0;
        text-align: center;
    }
    .cover>h3{
        font-size:0.9rem;
        line-height: 2.8rem;
        font-weight: 400;
    }
    .poster_list{
        padding:0 2rem;
        overflow: hidden;
    }
    .poster_list li{
        float: left;
        width:40%;
        box-shadow: 0 0 0.2rem 0.1rem #8921ff inset;
        border-radius: 0.3rem;
        margin-right:19%;
        position: relative;
    }
    .poster_list li:last-child{
        margin-right:0;
    }
    .poster_list li>img{
        width:94%;
        /*height: 14rem;*/
        margin:3% 0 0;
        border-radius: 0.1rem;
    }
    /deep/.van-radio-group{
        position:absolute;
        bottom:0;
        right:0;
    }
    /deep/.van-radio .van-radio__icon{
        height:auto!important;
    }
    .download{
        width:3.5rem;
        margin-left:1.5rem;
    }
    .download dt img{
        width:100%;
    }
    .download dd{
        font-size: 0.8rem;
        margin-top:0.15rem;
    }
    .cover button{
        width:100%;
        border:0;
        background:0;
        height: 3.4rem;
        font-size: 1rem;
        border-top:1px solid rgba(255,255,255,0.16);
        color: #fff;
        position: absolute;
        left:0;
        bottom:0;
    }
   
</style>
